<!DOCTYPE html> 
	<head>
		<title>Benchmarking</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link type="text/css" rel="stylesheet" href="css/960/min/960.css" />
		<link type="text/css" rel="stylesheet" href="css/960/min/960_16_col.css" />
		<link type="text/css" rel="stylesheet" href="css/normalize/min/normalize.css" />
		<link type="text/css" rel="stylesheet" href="css/style.css" />
		<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Anton" />
		<script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
	</head>
	<body>
		<header class="dark">
			<div class="container_16">
				<h1 class="title"><a href="/">Google maps jQuery plugin</a> Benchmarks</h1>
			</div>
		</header>
		<div class="container_16">
			<article class="grid_16">
				<div id="results"></div>
				<div id="map_canvas" class="hidden"></div>
				<div id="map_canvas_api" class="hidden"></div>
			</article>
			<footer class="hidden">
                <div itemscope itemtype="http://data-vocabulary.org/Person">
                    Author: <span itemprop="name">Johan S&auml;ll Larsson</span> (<a href="http://johansalllarsson.se" itemprop="url">http://johansalllarsson.se</a>)
                </div>
			</footer>
		</div>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
		<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/demo.js"></script>
		<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
		<script type="text/javascript">
			
			$(function() {
				
				var map, markers = [], amountOfMarkersToSpawn = 1000;
				
				demo.add(function() {
					$('#map_canvas').gmap({ 'callback': function() {
						demo.timeStart('test_1', 'Add '+amountOfMarkersToSpawn+' markers using the plugin');
						for ( var i = 0; i < amountOfMarkersToSpawn; i++ ) {
							this.addMarker( { 'a': ['a','b','c'], 'position': new google.maps.LatLng((Math.random()*100), (Math.random()*100)), 'bounds': false, 'visible': false } );
						}
						demo.timeEnd('test_1');
					}});
				});
				
				demo.add(function() {
					map = new google.maps.Map(document.getElementById('map_canvas_api') );
					demo.timeStart('test_2', 'Add '+amountOfMarkersToSpawn+' markers with google maps API');
					for ( var i = 0; i < amountOfMarkersToSpawn; i++ ) {
						markers.push(new google.maps.Marker( { 'a': 'a', 'map': map, 'position': new google.maps.LatLng((Math.random()*100), (Math.random()*100)), 'visible': false } ));
					}
					demo.timeEnd('test_2');
				});
				
				demo.add(function() {
					demo.timeStart('test_3', 'Find a marker by property (array) using the plugin');
					$('#map_canvas').gmap('find', 'markers', {'property': 'a', 'value': ['a','b','c'] }, function(marker, isFound) {
						if ( isFound ) {
							marker.setVisible(false);
						}
					});
					demo.timeEnd('test_3');
				});
				
				demo.add(function() {
					demo.timeStart('test_4', 'Find a marker by property (string) using ordinary js');
					for ( var i = 0; i < markers.length; i++ ) {
						if ( markers[i].a === 'a' ) {
							markers[i].setVisible(false);
						}
					}
					demo.timeEnd('test_4');
				});
				
				demo.add(function() {
					demo.timeStart('test_5', 'Clear all markers using the plugin');
					$('#map_canvas').gmap('clear', 'markers');
					demo.timeEnd('test_5');
				});
				
				demo.add(function() {
					demo.timeStart('test_6', 'Clear all markers using google maps API');
					for ( var i = 0; i < markers.length; i++ ) {
						google.maps.event.clearInstanceListeners(markers[i]);
						markers[i].setMap(null);
						markers[i] = null;
					}
					demo.timeEnd('test_6');
				});
				
				
				demo.load();
				demo.report('#results');
				
			});
			
		</script>
	</body>
</html>
